<%--
  Created by IntelliJ IDEA.
  User: 23649
  Date: 2021/5/11
  Time: 10:05
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>

    <%
        String paths = request.getContextPath();
        String basePath= request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+paths+"/";
    %>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
    <style type="text/css">
        #head{
            width: 1100px;
            height: 350px;
            margin: auto;
            font-family: "方正大黑简体";
            color: #FFFFFF;
        }
      #tit>h3{
            text-align: center;
        }
      #head span{
          margin-top: 50px;
          margin-left: 380px;
      }
    #office a{
        color: black;
        text-decoration:none;


    }
    .office-name span{
        font-family: "方正大黑简体";
        margin-left: 110px;
        line-height:50px;

    }
    .office-name{
       border:1px black solid ;
        border-radius:5px;
        width: 283px;
        height: 55px;
        display: inline-block;
        margin-right: 200px;
    }
    #office{
        margin-top: 30px;
        margin-left: 375px;
    }
    </style>
    <title>Title</title>
</head>
<body>
<div id="head" style="background-image: url('<%=basePath%>img/guahao.png')">
        <div id="tit">
            <h3>患者服务</h3>
        </div>
        <div ><span>用最真诚的服务态度，专业的药疗技术，为您服务</span></div>
</div>
    <div id="office">
        <div class="office-name"><span><a id="huazi" href="javaScript:void(0)">华子科</a></span></div>
        <div class="office-name"><span><a id="guke" href="javaScript:void(0)">骨科</a></span></div>
        <br>
        <div class="office-name"><span><a href="javaScript:void(0)">神经外科</a></span></div>
        <div class="office-name"><span><a href="javaScript:void(0)">普通外科</a></span></div>      <br>
        <div class="office-name"><span><a href="javaScript:void(0)">心外科</a></span></div>
        <div class="office-name"><span><a href="javaScript:void(0)">男科</a></span></div>      <br>
        <div class="office-name"><span><a href="javaScript:void(0)">妇科</a></span></div>
        <div class="office-name"><span><a href="javaScript:void(0)">手足外科</a></span></div>      <br>
        <div class="office-name"><span><a href="javaScript:void(0)">胸外科</a></span></div>
        <div class="office-name"><span><a href="javaScript:void(0)">肠胃外科</a></span></div>      <br>
        <div class="office-name"><span><a href="javaScript:void(0)">眼外科</a></span></div>
        <div class="office-name"><span><a href="javaScript:void(0)">耳外科</a></span></div>      <br>
        <div class="office-name"><span><a href="javaScript:void(0)">颈部外科</a></span></div>
        <div class="office-name"><span><a href="javaScript:void(0)">肛肠外科</a></span></div>      <br>
        <div class="office-name"><span><a href="javaScript:void(0)">肝胆外科</a></span></div>
        <div class="office-name"><span><a href="javaScript:void(0)">泌尿外科</a></span></div>      <br>
        <div class="office-name"><span><a href="javaScript:void(0)">整形外科</a></span></div>
        <div class="office-name"><span><a href="javaScript:void(0)">皮肤科</a></span></div>      <br>
        <div class="office-name"><span><a href="javaScript:void(0)">儿外科</a></span></div>
        <div class="office-name"><span><a href="javaScript:void(0)">血管科</a></span></div>
    </div>
<img  src="<%=basePath%>img/dibu.jpg"  style="width: 1425px; " >
    <script src="<%=basePath%>jquery-1.12.4.js"></script>
    <script type="text/javascript">
        $(function (){
            $(".office-name").mousemove(function (){
                    $(this).css({"background":"#c5a268","color":"#FFFFFF"});
            })
            $(".office-name").mouseout(function (){
                    $(this).css({"background":"#FFFFFF","color":"#000000"});
            })
            $("#huazi").click(function (){
                $(this).attr("href","<%=basePath%>doctor?opr=huazi");
            })
            $("#guke").click(function (){
                $(this).attr("href","<%=basePath%>doctor?opr=guke");
            })
        })
    </script>
</body>
</html>
